<template>
  <van-card
      v-for="user in props.userList"
      :desc="user.profile"
      :title="`${user.username} (${user.planetCode})`"
      style="border-radius: 25px;background-color: #e8e8e8"
      :thumb="user.avatarUrl"
  >
    <template #thumb>
      <van-image :src="user?.avatarUrl" round width="88" height="88" @click="showUserDetail(user?.id)"/>
    </template>
    <template #tags>
      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">
        {{tag}}
      </van-tag>
    </template>
    <template #price>
      <van-icon name="phone-o" style="">{{ ':' + user.phone }}</van-icon>
    </template>
    <template #footer>
<!--      <van-button v-else size="mini" plain type="primary"-->
<!--                  style="width: 48px;height: 28px;margin-top: 10px">-->
<!--        关注-->
<!--      </van-button>-->
      <van-button v-if="user.isFollow" size="mini" plain type="danger"
                  style="width: 60px;height: 28px;margin-top: 10px"
                  @click="followUser(user)"
      >
        取消关注
      </van-button>
      <van-button size="mini" plain type="primary"
                  style="width: 48px;height: 28px;margin-top: 10px" @click="followUser(user)">
        关注
      </van-button>
      <van-button size="mini" plain type="primary"
                  style="width: 48px;height: 28px;margin-top: 10px" @click="toChat(user)">
        私聊
      </van-button>
<!--      <van-button size="small" type="primary" @click="send" style="margin-right: 16px">发送</van-button>-->

<!--            <van-button size="mini">按钮</van-button>-->
    </template>
  </van-card>
<!--    </van-skeleton>-->
</template>

<script setup lang="ts">
import {UserType} from "../models/user";
import myAxios from "../plugins/myAxios.ts";
import {getCurrentUser} from "../services/user";
import {useRouter} from "vue-router";
import {Dialog,Toast} from "vant";
import "vant/es/dialog/style";
const router = useRouter();

interface UserCardListProps{
  loading: boolean;
  userList: UserType[];
}


const props = withDefaults(defineProps<UserCardListProps>(),{
  loading: true,
  userList: [] as UserType[],
});
const toChat = async (user: any) => {
  const currentUser = await getCurrentUser();
  if (!currentUser) {
    Dialog.confirm({
      message:
          "该功能需要登陆后使用,是否登录",
      confirmButtonText: "去登录"
    })
        .then(() => {
         Toast.fail("未登录")
          router.replace("/user/login");
        })
        .catch(() => {
        });
 } else {
    await router.push({
      path: "/chat",
      query: {
        id: user.id,
        username: user.username,
        userType: 1
      }
    });
  }
};
const followUser = async (user: any) => {
  let res = await myAxios.post("/follow/" + user.id);
  if (res?.data.code === 0) {
    let res_ = await myAxios.get("/user/" + user.id);
    if (res_.data.code === 0) {
      user.isFollow = res_.data.data.isFollow
    }
  } else {
    Toast.fail(res.data.message)
  }
}

const showUserDetail = (id: any) => {
  router.push({
    path: "/user/detail",
    query: {
      id: id
    }
  })
}

</script>

<style scoped>

</style>

<!--<template>-->
<!--  <van-card-->
<!--      v-for="user in props.userList"-->
<!--      :desc="user.profile"-->
<!--      :title="`${user.username} (${user.planetCode})`"-->
<!--      :thumb="user.avatarUrl"-->
<!--  >-->
<!--    <template #tags>-->
<!--      <van-tag plain type="danger" v-for="tag in user.tags" style="margin-right: 8px; margin-top: 8px">-->
<!--        {{ tag }}-->
<!--      </van-tag>-->
<!--    </template>-->
<!--    <template #footer>-->
<!--      <van-button size="mini" plain type="primary" style="width: 48px;height: 28px;margin-top: 10px">-->
<!--        关注-->
<!--      </van-button>-->
<!--      <van-button size="mini" plain type="primary" style="width: 48px;height: 28px;margin-top: 10px" @click="toChat(user)">-->
<!--        私聊-->
<!--      </van-button>-->
<!--    </template>-->
<!--  </van-card>-->
<!--</template>-->

<!--<script setup lang="ts">-->
<!--import { UserType } from "../models/user";-->
<!--import myAxios from "../plugins/myAxios.ts";-->
<!--import { getCurrentUser } from "../services/user";-->
<!--import { useRouter } from "vue-router";-->
<!--import { Dialog, Toast } from "vant";-->
<!--import "vant/es/dialog/style"; // 导入样式-->

<!--const router = useRouter();-->

<!--interface UserCardListProps {-->
<!--  loading: boolean;-->
<!--  userList: UserType[];-->
<!--}-->

<!--const props = withDefaults(defineProps<UserCardListProps>(), {-->
<!--  loading: true,-->
<!--  userList: [] as UserType[],-->
<!--});-->

<!--const toChat = async (user: any) => {-->
<!--  const currentUser = await getCurrentUser();-->
<!--  if (!currentUser) {-->
<!--    Dialog.confirm({-->
<!--      message: "该功能需要登陆后使用,是否登录",-->
<!--      confirmButtonText: "去登录"-->
<!--    })-->
<!--        .then(() => {-->
<!--          Toast.fail("未登录"); // 使用 Toast.fail-->
<!--          router.replace("/user/login");-->
<!--        })-->
<!--        .catch(() => {-->
<!--          // 用户点击取消按钮-->
<!--        });-->
<!--  } else {-->
<!--    await router.push({-->
<!--      path: "/chat",-->
<!--      query: {-->
<!--        id: user.id,-->
<!--        username: user.username,-->
<!--        userType: 1-->
<!--      }-->
<!--    });-->
<!--  }-->
<!--};-->
<!--</script>-->

<!--<style scoped>-->
<!--/* 组件样式 */-->
<!--</style>-->